
<template>
  <el-container>
    <div style="width: 80%;padding-left: 10%;margin-top: 20px" >
      <el-container>
        <el-aside width="230px">
          <div class="srca">
            <h3>
              <i class="fa fa-user" aria-hidden="true"></i>基本信息<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('jb')">编辑</el-link></h3>
            <hr/>
            <ul>
              <li>
                <label>岗位负责人：</label>
                <span>{{enterinfo.principal}}</span>
              </li>
              <li>
                <label>上市情况：</label>
                <span>{{enterinfo.listing}}</span>
              </li>
              <li>
                <label>公司人数：</label>
                <span>{{enterinfo.people}}</span>
              </li>
            </ul>
          </div>
          <div class="srca">
            <h3>
              <i class="fa fa-phone-square" aria-hidden="true"></i>联系方式<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('tel')">编辑</el-link></h3>
            <hr/>
            <ul>
              <li>
                <label>手机：</label>
                <span>{{enterinfo.tel}}</span>
              </li>
              <li>
                <label>邮箱：</label>
                <span>{{enterinfo.email}}</span>
              </li>
            </ul>
          </div>
          <div class="srca">
            <h3>
              <i class="fa fa-gear" aria-hidden="true"></i>公商信息<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('gs')">编辑</el-link></h3>
            <hr/>
            <ul>
              <li>
                <label>公司名称：</label>
                <span >{{enterinfo.cname}}</span>
              </li>
              <li>
                <label>法人代表：</label>
                <span >{{enterinfo.legal}}</span>
              </li>
              <li>
                <label>注册资金：</label>
                <span >{{enterinfo.money}}</span>
              </li>
              <li>
                <label>成立时间：</label>
                <span >{{enterinfo.time}}</span>
              </li>
              <li>
                <label>企业类型：</label>
                <span >{{enterinfo.attribute}}</span>
              </li>
              <li>
                <label>经营状态：</label>
                <span >{{enterinfo.status}}</span>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main>
            <div>
              <h3>
                <i class="fa fa-institution" aria-hidden="true"></i>公司介绍<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('js')">编辑</el-link></h3>
              <hr/>
              <ul class="info-content">
                <li style="list-style-type:none;">
                  <p v-html="enterinfo.info">
                  </p>
                </li>
              </ul>
            </div>
          <br><br>
          <div style="width: 45%;float: left">
            <h3>
              <i class="el-icon-picture" aria-hidden="true"></i>营业执照<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('lic')">编辑</el-link></h3>
            <hr/>

                <div class="demo-image">
                  <div class="block">
                    <el-image :src="dz+enterinfo.licenseimg" style="width: 200px; height: 200px"
                              :preview-src-list="srcList">
                      >
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </div>
                </div>


          </div>
          <div style="width: 45%;float: right">
            <h3>
              <i class="el-icon-picture" aria-hidden="true"></i>公司Logo<el-link icon="el-icon-edit" type="success" style="margin-left: 40px" @click="add('logo')">编辑</el-link></h3>
            <hr/>

                <div class="demo-image">
                  <div class="block">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="dz+enterinfo.logoimg"
                        :fit="fit"></el-image>
                  </div>
                </div>


          </div>
        </el-main>
      </el-container>
      <el-dialog title="编辑基本信息" :visible.sync="jb_state" style="width: 900px;padding-left: 26%">
        <el-form ref="form" :model="bd" label-width="80px">
          <el-form-item label="负责人">
            <el-input
                style="width: 200px"
                v-model="bd.principal"
            ></el-input>
          </el-form-item>
          <el-form-item label="上市情况">
            <el-select v-model="value">
              <el-option label="已上市" value="已上市"></el-option>
              <el-option label="未上市" value="未上市"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司人数">
            <el-input
                style="width: 200px"
                v-model="bd.people"
            ></el-input>
          </el-form-item>

          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('jbadd')"
                v-show="jb_input_state"
            >确认</el-button>
          </div>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑联系方式" :visible.sync="tel_state" style="width: 900px;padding-left: 26%">
        <el-form ref="form" :model="bd" label-width="80px">
          <el-form-item label="电话">
            <el-input
                style="width: 200px"
                v-model="bd.tel"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
                style="width: 200px"
                v-model="bd.email"
            ></el-input>
          </el-form-item>

          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('teladd')"
                v-show="tel_input_state"
            >确认</el-button>
          </div>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑工商信息" :visible.sync="gs_state" style="width: 900px;padding-left: 26%">
        <el-form ref="form" :model="bd" label-width="80px">
          <el-form-item label="公司名称">
            <el-input
                style="width: 200px"
                v-model="bd.cname"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人代表">
            <el-input
                style="width: 200px"
                v-model="bd.legal"
            ></el-input>
          </el-form-item>
          <el-form-item label="注册资金">
            <el-input
                style="width: 200px"
                v-model="bd.money"
            ></el-input>
          </el-form-item>
          <el-form-item label="成立时间">
            <el-date-picker
                v-model="bd.time"
                type="date"
                format="yyyy-mm-dd"
                value-format="yyyy-mm-dd"
                style="width: 230px"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="企业类型">
            <el-select v-model="qyt">
              <el-option label="有限责任公司" value="有限责任公司"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营状态">
            <el-select v-model="ztt">
              <el-option label="存续" value="存续"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('gsadd')"
                v-show="gs_input_state"
            >确认</el-button>
          </div>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑公司介绍" :visible.sync="js_state">
        <el-form ref="form" :model="bd">
          <vTinymce v-model="bd.info" />
          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('jsadd')"
                v-show="js_input_state"
            >确认</el-button
            >
          </div>
        </el-form>
      </el-dialog>
      <el-dialog title="修改营业执照" :visible.sync="img_state" style="width: 900px;padding-left: 26%">
        <el-form ref="form" :model="emp_from" label-width="80px">
          <el-upload
              class="upload-demo"
              ref="upload"
              :auto-upload="false"
              :http-request="upLoadFile"
              :multiple="multiple"
              :limit="Number(1)"
              drag
              action=""
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过3MB</div>
          </el-upload>
          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('logoadd')"
                v-show="img_input_state"
            >确认</el-button>
          </div>
        </el-form>
      </el-dialog>
      <el-dialog title="修改公司logo" :visible.sync="lic_state" style="width: 900px;padding-left: 26%">
        <el-form ref="form" :model="emp_from" label-width="80px">
          <el-upload
              class="upload-demo"
              ref="upload"
              :auto-upload="false"
              :http-request="upLoadFile"
              :multiple="multiple"
              :limit="Number(1)"
              drag
              action=""
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过3MB</div>
          </el-upload>
          <div align="center">
            <el-button
                type="success"
                size="small"
                @click="add('licadd')"
                v-show="lic_input_state"
            >确认</el-button>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </el-container>
</template>


<script>

export default {
  data(){
    return {
      bd:{
        principal:"",
        people:"",
        cname:"",
        legal:"",
        listing:"",
        tel:"",
        email:"",
        money:"",
        time:"",
        info:"",
      },
      qyt:"",
      ztt:"",
      value:"",
      dz:this.$axios.defaults.baseURL,
      enterinfo: {},
      claim: "",
      opera: "",
      count: 1,
      jb_state:false,
      jb_input_state:false,
      tel_state:false,
      tel_input_state:false,
      gs_state:false,
      gs_input_state:false,
      js_state:false,
      js_input_state:false,
      lic_state:false,
      lic_input_state:false,
      img_state:false,
      img_input_state:false,
      srcList: [
      ],
    }
  },
  methods:{
    upLoadFile(file){
      this.formData.append("files",file.file)
    },
    add(key) {
      switch (key) {
        case "jb":
          this.bd.principal = this.enterinfo.principal;
          this.bd.people = this.enterinfo.people;
          this.value = this.enterinfo.listing;
          this.jb_state = true;
          this.jb_input_state = true;
          break;
        case "jbadd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/enterprise/updateworkInfo",
            method: "post",
            params: {
              uid:sessionStorage.getItem("enteruid"),
              principal:this.bd.principal,
              people: this.bd.people,
              listing: this.value,
              type:"jb"
            }
          }).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.jb_state = false;
              this.jb_input_state = false;
              this.myselfinfo();
            }, 1500);
          })
          break;
        case "tel":
          this.bd.tel = this.enterinfo.tel;
          this.bd.email = this.enterinfo.email;
          this.tel_state = true;
          this.tel_input_state = true;
          break;
        case "teladd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/enterprise/updateworkInfo",
            method: "post",
            params: {
              uid:sessionStorage.getItem("enteruid"),
              tel:this.bd.tel,
              email:this.bd.email,
              type:"tel"
            }
          }).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.tel_state = false;
              this.tel_input_state = false;
              this.myselfinfo();
            }, 1500);
          })
          break;
        case "gs":
          this.bd.cname = this.enterinfo.cname;
          this.bd.legal = this.enterinfo.legal;
          this.bd.money = this.enterinfo.money;
          this.bd.time = this.enterinfo.time;
          this.qyt = this.enterinfo.attribute;
          this.ztt = this.enterinfo.listing;
          this.gs_state = true;
          this.gs_input_state = true;
          break;
        case "gsadd":
          this.$axios({
            url: this.$axios.defaults.baseURL+"/enterprise/updateworkInfo",
            method: "post",
            params: {
              uid:sessionStorage.getItem("enteruid"),
               cname :this.bd.cname,
               legal :this.bd.legal,
               money : this.bd.money,
               time: this.bd.time,
               attribute : this.qyt,
               status : this.ztt,
               type:"gs"
            }
          }).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.gs_state = false;
              this.gs_input_state = false;
              this.myselfinfo();
            }, 1500);
          })
          break;
        case "js":
          this.bd.info = this.enterinfo.info;
          this.js_state = true;
          this.js_input_state = true;
          break;
        case "jsadd":
          this.$axios({
            uid:sessionStorage.getItem("enteruid"),
            url: this.$axios.defaults.baseURL+"/enterprise/updateworkInfo",
            method: "post",
            params: {
              info:this.bd.info,
              type:"info"
            }
          }).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.js_state = false;
              this.js_input_state = false;
              this.myselfinfo();
            }, 1500);
          })
          break;
        case "logo":
          this.img_state = true;
          this.img_input_state = true;
          break;
        case "logoadd":
          this.formData = new FormData();
          this.formData.append("type","logo");
          this.formData.append("uid",sessionStorage.getItem("enteruid"));
          this.$refs.upload.submit();
          this.$axios.post(this.$axios.defaults.baseURL+"/enterprise/updateworkImg",this.formData,{
            headers: {'Content-Type': 'multipart/form-data'
            }}).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.img_state = false;
              this.img_input_state = false;
              if(res.status){
                this.myselfinfo();
              }
            }, 1500);
          })
          break;
        case "lic":
          this.lic_state = true;
          this.lic_input_state = true;
          break;
        case "licadd":
          this.formData = new FormData();
          this.formData.append("type","lic");
          this.formData.append("uid",sessionStorage.getItem("enteruid"));
          this.$refs.upload.submit();
          this.$axios.post(this.$axios.defaults.baseURL+"/enterprise/updateworkImg",this.formData,{
            headers: {'Content-Type': 'multipart/form-data'
            }}).then(res => {
            if (res.status) {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            setTimeout(() => {
              this.lic_state = false;
              this.lic_input_state = false;
              if(res.status){
                this.myselfinfo();
              }
            }, 1500);
          })
          break;
      }
    },
    myselfinfo(){
        this.$axios({
          url: this.$axios.defaults.baseURL+"/enterprise/selectmyself",
          method: "get",
          params:{
            uid:sessionStorage.getItem("enteruid")
          }
        }).then(res => {
          this.enterinfo = res.data;
          this.srcList.push(this.$axios.defaults.baseURL+res.data.licenseimg);
        })
    },
  },
  mounted() {
    this.myselfinfo();

  }
}
</script>

<style scoped>

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.amap-wrapper {
  width: 800px;
  height: 200px;
}
.el-aside {
  color: #333;
  font-family: Arial;
  border-radius: 5px 5px 5px 5px;
  width: 20%;
  background-color: white;
}

.el-main {
  background-color: white;
  color: #333;
  margin-left: 10px;
  border-radius: 5px 5px 5px 5px;
}
.srca{
  margin-top: 10px;
  margin-left: 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

li{
  margin-top: 8px;
  list-style: none;
}
</style>
